<template>
  <!-- 登录页 -->
  <div class="aa">
    <el-form :model="val" :rules="rules" ref="val">
      <!-- 头像 -->
      <div class="block">
        <el-avatar :src="touxiang"></el-avatar>
      </div>
      <!-- 输入框 -->
      <el-form-item  prop="loginName">
        <el-input
          style="height: 50px"
          v-model="val.loginName"
          placeholder="请输入账号"
          prefix-icon="el-icon-mobile-phone"
        >
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="val.password"
          placeholder="请输入密码"
          prefix-icon="el-icon-lock"
          type="password"
        ></el-input>
      </el-form-item>
      <!-- 1 -->
      <el-form-item prop="code">
        <el-input
          v-model="val.code"
          placeholder="请输入验证码"
          prefix-icon="el-icon-moon"
        >
          <!-- 验证码框 -->
          <template #suffix>
            <!-- 点击切换不了图片 -->
            <div @click="yanzhengma" class="yanzk">
              <img :src="val.imageCode + val.clientToken" alt="图片加载失败" />
            </div>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// import { setTokenA } from "@/store/modules/token";
import { login } from '@/api/user';
import { clientToken as ClientTokena } from '@/utils/suijishu';
import request from '@/utils/request';
export default {
  data() {
    return {
      value: '',
      touxiang:
        'https://upload-bbs.mihoyo.com/upload/2022/07/14/80823534/1d6a2f4a5582b0cb93b077333d70e317_2114140172481656159.png?x-oss-process=image//resize,s_600/quality,q_80/auto-orient,0/interlace,1/format,png',
      val: {
        loginName: 'admin',
        password: 'admin',
        code: '',
        loginType: 0,

        // 随机数
        clientToken: '',

        // 图片
        imageCode: '',
      },
      rules: {
        loginName: [
          {
            required: true,
            message: '请输入正确的账号',
            trigger: ['blur'],
          },
          {
            pattern: /^\w{5,11}/,
            message: '请输入5~11位密码',
            trigger: ['blur'],
          },
        ],
        password: [
          {
            required: true,
            message: '请输入正确的密码',
            trigger: ['blur'],
          },
          {
            pattern: /^\w{5,11}/,
            message: '请输入5~11位密码',
            trigger: ['blur'],
          },
        ],
        code: [
          {
            required: true,
            message: '请输验证码',
            trigger: ['blur'],
          },
        ],
      },
    };
  },
  created() {
    // 获取验证码API地址
    this.val.imageCode =
      request.defaults.baseURL + `api/user-service/user/imageCode/`;
    // console.log(this.imageCode);
    // 初始化验证码
    this.yanzhengma();
    //  console.log(this.imageCode);
  },
  methods: {
    // async yanzhengde() {
    //   const res = await getClientToken({clientToken: this});
    //   this.val.yanzmtb = res.data;
    //   console.log(res);
    // },
    // 获取随机数
    async yanzhengma() {
      this.val.clientToken = ClientTokena();
      // console.log(this.clientToken);
    },
    // 登录
    async onSubmit() {
      // 怎么传都没数据
      try {
        // 拦截账号密码验证码没填的
        this.$refs.val.validate();
        const res = await login({
          loginName: this.val.loginName,
          password: this.val.password,
          code: this.val.code,
          loginType: this.val.loginType,
          clientToken: this.val.clientToken,
        });
        // token存入本地
        this.$store.commit('token/setTokenA', {
          Token:res.data.token,
          userName: res.data.userName})
        console.log(res);
        this.$router.push('/zhuye')
      } catch (error) {
        console.error(error);
        if (error.msg === '验证码错误') {
          this.yanzhengma();
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.aa {
  background-repeat: no-repeat; //垂直不从复
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-position: center 0;
  position: fixed;
  top: 0;
  left: 0;
  position: absolute;
  min-width: 1000px;
  background-image: url(@/img/kelide.jpg);
  width: 100%;
  height: 100%;
  .el-form {
    position: absolute;
    width: 518px;
    height: 388px;
    top: 50%;
    left: 50%;
    margin-top: -194px;
    margin-left: -259px;
    padding: 76px 35px 0;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin-top: -194px;
    margin-left: -259px;
    .el-avatar {
      box-shadow: 0 4px 12px 5px rgba(252, 59, 59, 0.2);
      position: absolute;
      width: 96px;
      height: 96px;
      top: -46px;
      left: 50%;
      margin-left: -48px;
    }
    .el-form-item {
      line-height: 52px;
      width: 100%;
      height: 52px;
      margin-bottom: 24px;
      background: #fff;
      border: 1px solid #e2e2e2;
      border-radius: 4px;
      border: 0;

      .el-input {
        position: absolute;
        width: 100%;
        height: 52px;
        line-height: 54px;
        position: relative;
        font-size: 14px;
      }
      .el-button {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
  }
}
.yanzk {
  // width: 130px;
  // height: 50px;
  img {
    height: 50px;
    position: absolute;
    top: 1px;
    left: -124px;
  }
}
::v-deep .el-input__inner {
  height: 50px;
}
</style>
